import React,{useState,useEffect} from 'react';
import Robot from './components/Robot'
// import './App.module.css';
// import mokeData from './mockdata/robots.json'
import logo from './assets/images/logo.svg'
import styles from './App.module.css'
import ShoppingCart from "./components/ShoppingCart";

/*interface Person {
}*/

/*interface State {
    /!*
    * 这里为什么要使用any
    *   1、 数据来源于网络，返回类型不受前端控制
    *   2、前端强行定义API数据类型，违反了前后端分离原则
    *   3、不能为了使用TypeScript 而放弃JavaScript的灵活性
    * *!/
    robotGallery: any[];
    count: number
}*/

const App: React.FC = () => {
    /* constructor(props) {
         super(props);
         this.state = {
             robotGallery: [],
             count: 0
         }
     }*/
    const [count,setCount] = useState<number>(0)
    const [robotGallery,setRobotGallery] = useState<any>([])
    const [loading,setLoading] = useState<boolean>(false)
    const [error,setError] = useState<string>('')
    useEffect(()=>{
        document.title = `点击了${count}次`
    },[count])
    // 传入空数组 模仿ComponentDidMount
    useEffect(()=>{
        setLoading(true)
        try {
            // throw new Error('asd');
            // eslint-disable-next-line no-unreachable
            let getData = async () => {
                const response = await fetch('https://jsonplaceholder.typicode.com/users')
                const data = await response.json()
                setRobotGallery(data)
                setLoading(false)
            };
            getData()
        } catch (e) {
            setError(e.message)
        }
    },[])
    return (
        <div className={styles.app}>
            <div className={styles.appHeader}>
                <img src={logo} alt="" className={styles.appLogo}/>
                <h1>罗伯特机器人炫酷吊炸天online购物平台的名字要长</h1>
            </div>
            <ShoppingCart/>
            <button
                onClick={() => {
                    setCount(count + 1)
                }}
            >click
            </button>
            {count}
            {(error) && <div>网站出错{error}</div>}
            {
                !loading ? (
                    <ul className={styles.robotList}>
                        {
                            robotGallery.map(e => <Robot id={e.id} key={e.id} email={e.email} name={e.name}/>)
                        }
                    </ul>
                ) : (<h2>加载中...</h2>)
            }

        </div>
    );
}

export default App;
